<template>
  <transition name="list-fade">
    <div class="playlist"
         @click="hide"
         v-show="showFlag">
      <div class="list-wrapper">
        <div class="list-header">
          <h1 class="title">
            <i class="icon"
               :class="iconMode" @click.stop="changeMode"></i>
            <span class="text">{{modeText}}</span>
            <span class="clear" @click.stop="showConfirm">
              <i class="icon-clear"></i>
            </span>
          </h1>
        </div>
        <scroll class="list-content"
                :data="sequenceList"
                ref="scroll">
          <transition-group name="list"
                            tag="ul" ref="list">
            <li class="item"
                v-for="(item,index) in sequenceList"
                :key="item.id + 'playlist'"
                @click.stop="selectItem(item, index)">
              <i class="current"
                 :class="getCurrentCls(item)"></i>
              <span class="text" :class="getCurrentSongCls(item)">{{item.name}}</span>
              <span class="like" @click.stop="toggleFavorite(item)"><i :class="getFavoriteIcon(item)"></i></span>
              <span class="delete"
                    @click.stop="deleteOne(item)"><i class="icon-delete"></i></span>
            </li>
          </transition-group>
        </scroll>
        <div class="list-operate">
          <div class="add" @click.stop="addSong">
            <i class="icon-add"></i>
            <span class="text">添加歌曲到队列</span>
          </div>
        </div>
        <div class="list-close"><span>关闭</span></div>
      </div>
      <confirm ref="confirm" text="是否清空播放列表" @confirm="clearAllSongs"></confirm>
      <add-song ref="addSong"></add-song>
    </div>
  </transition>
</template>

<script>
import Scroll from 'base/scroll/scroll'
import Confirm from 'base/confirm/confirm'
import { playerMixin } from 'common/js/mixin'
import { playMode } from 'common/js/config'
import {mapActions} from 'vuex'
import AddSong from 'components/add-song/add-song'

export default {
  name: 'playlist',
  components: { Scroll, Confirm, AddSong },
  mixins: [playerMixin],
  data () {
    return {
      showFlag: false,
      refreshDelay: 120
    }
  },
  computed: {
    modeText () {
      return this.mode === playMode.sequence ? '顺序播放' : this.mode === playMode.loop ? '单曲循环' : '随机播放'
    }
  },
  methods: {
    ...mapActions(['deleteSong', 'clearList']),
    hide () {
      this.showFlag = false
    },
    show () {
      this.showFlag = true
      setTimeout(() => {
        this.$refs.scroll.refresh()
        this.scrollToCurrentSong(this.currentSong)
      }, 50)
    },
    showConfirm () {
      this.$refs.confirm.show()
    },
    getCurrentCls (item) {
      return this.currentSong.id === item.id ? 'icon-play' : ''
    },
    getCurrentSongCls (item) {
      return this.getCurrentCls(item) === 'icon-play' ? 'active' : ''
    },
    deleteOne (item) {
      this.deleteSong(item)
    },
    clearAllSongs () {
      this.clearList()
    },
    selectItem (item, index) {
      if (this.mode === playMode.random) {
        index = this.playlist.findIndex((song) => song.id === item.id)
      }
      this.setCurrentIndex(index)
    },
    scrollToCurrentSong (current) {
      const index = this.sequenceList.findIndex(song => song.id === current.id)
      this.$refs.scroll.scrollToElement(this.$refs.list.$el.children[index], 350)
    },
    addSong () {
      this.$refs.addSong.show()
    }
  }
}
</script>

<style lang="less" scoped>
@import "~common/css/variable";
@import "~common/css/mixin";

.playlist {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background-color: @color-background-d;
  &.list-fade-enter-active,
  &.list-fade-leave-active {
    transition: opacity 0.3s;
    .list-wrapper {
      transition: all 0.3s;
    }
  }
  &.list-fade-enter,
  &.list-fade-leave-to {
    opacity: 0;
    .list-wrapper {
      transform: translate3d(0, 100%, 0);
    }
  }
  .list-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: @color-highlight-background;
    .list-header {
      position: relative;
      padding: 20px 30px 10px 20px;
      .title {
        display: flex;
        align-items: center;
        .icon {
          margin-right: 10px;
          font-size: 30px;
          color: @color-theme-d;
        }
        .text {
          flex: 1;
          font-size: @font-size-medium;
          color: @color-text-l;
        }
        .clear {
          .extend-click;
          .icon-clear {
            font-size: @font-size-medium;
            color: @color-text-d;
          }
        }
      }
    }
  }
  .list-content {
    max-height: 240px;
    overflow: hidden;
    .item {
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 30px 0 20px;
      overflow: hidden;
      &.list-enter-active,
      &.list-leave-active {
        transition: all 0.1s;
      }
      &.list-enter,
      &.list-leave-to {
        height: 0;
      }
      .current {
        flex: 0 0 20px;
        width: 20px;
        font-size: @font-size-small;
        color: @color-theme-d;
      }
      .text {
        flex: 1;
        .no-wrap;
        font-size: @font-size-medium;
        color: @color-text-d;
        &.active {
          color: @color-theme-d;
        }
      }
      .like {
        .extend-click;
        margin-right: 15px;
        font-size: @font-size-small;
        color: @color-theme;
        .icon-favorite {
          color: @color-sub-theme;
        }
      }
      .delete {
        .extend-click;
        font-size: @font-size-small;
        color: @color-theme;
      }
    }
  }
  .list-operate {
    width: 140px;
    margin: 20px auto 30px auto;
    .add {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      border: 1px solid @color-text-l;
      border-radius: 100px;
      color: @color-text-l;
      .icon-add {
        margin-right: 5px;
        font-size: @font-size-small-s;
      }
      .text {
        font-size: @font-size-small;
      }
    }
  }
  .list-close {
    text-align: center;
    line-height: 50px;
    background-color: @color-background;
    font-size: @font-size-medium-x;
    color: @color-text-l;
  }
}
</style>
